<template>
  <!-- 近七日供应商采购排名 -->
  <div class="SCMpurchasecontent">
    <div class="top">
      <div>
        <div id="pieOne" class="pieOne" />
        <div>{{ listOptions[0].name }}</div>
      </div>
      <div>
        <div id="pieTwo" class="pieOne" />
        <div>{{ listOptions[1].name }}</div>
      </div>
      <div>
        <div id="pieThree" class="pieOne" />
        <div>{{ listOptions[2].name }}</div>
      </div>
      <div>
        <div id="pieFour" class="pieOne" />
        <div>{{ listOptions[3].name }}</div>
      </div>
    </div>
    <div id="botm1" class="botm" />
  </div>
</template>

<script>
import tools from "@/utils/tools"; //引入tools.js
import { getSevenDaySupplier } from "@/api/user";
import * as echarts from "echarts/core";
import {
  TitleComponent,
  MarkLineComponent,
  TooltipComponent,
} from "echarts/components";
import { PieChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import { GridComponent } from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";

echarts.use([
  TitleComponent,
  MarkLineComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
  GridComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
  TooltipComponent,
]);

export default {
  name: "SCMpurchase",
  data() {
    return {
      optionList: [],
      listOptions: [
        {
          id: "pieOne",
          val: 0,
          color: "#E7EA5E",
          name: "",
        },
        {
          id: "pieTwo",
          val: 0,
          color: "#7FFFD9",
          name: "",
        },
        {
          id: "pieThree",
          val: 0,
          color: "#3CF24B",
          name: "",
        },
        {
          id: "pieFour",
          val: 0,
          color: "#2471FE",
          name: "",
        },
      ],
      dateX: [],
      floatList: [],
      maxNum: null,
      interval: null,
    };
  },
  created() {
    this.getSevenDaySupplier();
    // console.log()
  },
  methods: {
    async getSevenDaySupplier() {
      const res = await getSevenDaySupplier();
      if (res.code === 200) {
        console.log(res.data, "近七日供应商采购排名");
        res.data.supplierList.forEach((item, index) => {
          this.listOptions[index].val = item.proportion;
          console.log(item, "22222222222");
          if (item.name.length > 5) {
            this.listOptions[index].name = item.name.substring(0, 5) + "...";
          } else {
            this.listOptions[index].name = item.name;
          }
        });
        res.data.floatList.forEach((item, index) => {
          this.dateX.push(item.date.substring(5));
          this.floatList.push(item.totalPrice);
        });
        this.floatList = this.floatList.reverse();
        this.dateX = this.dateX.reverse();
        this.maxNum = Math.max(...this.floatList) + 2;
        this.maxNum = this.maxNum.toFixed();
        this.interval = parseInt(this.maxNum / 5);
        // console.log(
        //   this.listOptions,
        //   "供应商排名",
        //   this.floatList,
        //   this.maxNum
        // );
        this.$nextTick(() => {
          this.initEcharts();
          this.initSecondChar();
        });
      }
    },
    initEcharts() {
      for (let i = 0; i < this.listOptions.length; i++) {
        // console.log(this.listOptions, "this.listOptions", "wwwwwwwww");
        this.optionList.push({
          series: [
            // 系列
            {
              name: this.autoFillDecimal_4(this.listOptions[i].val),
              type: "pie", // pie类型的图实现环形图
              radius: ["80%", "100%"], // 数组的话，表示内圆和外圆的半径大小，相对于宽高中较小的那一个。
              center: ["50%", "50%"], // 圆心坐标
              avoidLabelOverlap: false, // 是否启用防止标签重叠策略
              startAngle: 90, // 第一个数据开始绘制的角度，以正交直角坐标系为标准
              label: {
                // 每个数据的标签
                show: true, // 设置为true则显示第一个数据
                position: "center", // 位置居中
                formatter: "{a}%", // {d}表示数据在总数据中的百分比
                fontSize: 18,
                fontWeight: "bold",
                color: "#FFFFFF",
              },
              color: [this.listOptions[i].color, "#343661"], // 系列的颜色
              emphasis: {
                // 高亮，即鼠标经过时的样式
                scale: false, // 表示不放大item
              },
              labelLine: {
                show: true,
              },
              data: [
                {
                  value: this.listOptions[i].val,
                  name: "",
                },
                {
                  value: 100 - this.listOptions[i].val,
                  name: "",
                  emphasis: {
                    label: {
                      // show: false,
                      // 这个数据高亮时不显示label，就不会显示替遮住第一个数据的label值了
                    },
                  },
                },
              ],
            },
          ],
        });
        let chartDom = document.getElementById(this.listOptions[i].id);
        let myChart = echarts.init(chartDom);
        this.optionList[i] && myChart.setOption(this.optionList[i]);
        // console.log(document.getElementById(this.listOptions[i].id))
      }
      // console.log(this.optionList)
      // console.log(this.optionList, "this.optionList", "wwwwwwwww");
    },
    initSecondChar() {
      const option = {
        tooltip: {
          show: true,
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: "#439AFF",
            },
          },
          axisTick: {
            show: false,
          },
          data: this.dateX,
          // eslint-disable-next-line no-dupe-keys
          data: [
            {
              value: this.dateX[0],
              // 突出周一
              textStyle: {
                // fontSize: 20,
                color: "#999999",
              },
            },

            {
              value: this.dateX[1],
              textStyle: {
                color: "#999999",
              },
            },
            {
              value: this.dateX[2],
              textStyle: {
                color: "#999999",
              },
            },
            {
              value: this.dateX[3],
              textStyle: {
                color: "#999999",
              },
            },
            {
              value: this.dateX[4],
              textStyle: {
                color: "#999999",
              },
            },
            {
              value: this.dateX[5],
              textStyle: {
                color: "#999999",
              },
            },
            {
              value: this.dateX[6],
              textStyle: {
                color: "#999999",
              },
            },
          ],
        },
        grid: {
          // 设置图表四周留白间距
          top: "26%",
          right: "8%",
          bottom: "20%",
          left: "5%",
        },
        yAxis: {
          name: "万元",
          type: "value",
          min: 0,
          max: this.maxNum,
          interval: this.interval,
          splitLine: {
            show: false,
          },
          axisLabel: {
            formatter: "{value}",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            textStyle: {
              color: "#fff",
              fontSize: 6,
            },
          },
        },
        series: [
          {
            data: this.floatList,
            type: "line",
            symbolSize: 8,
            smooth: true,
            lineStyle: {
              color: "rgba(127, 255, 217, 1)",
            },
            itemStyle: {
              normal: {
                color: "rgba(127, 255, 217, 1)",
                shadowBlur: 2,
                shadowColor: "rgba(0, 0, 0, .12)",
                shadowOffsetX: 2,
                shadowOffsetY: 2,
              },
            },
            markLine: {
              data: [
                {
                  yAxis: 70,
                },
              ],
              label: {
                show: false,
              },
              silent: true,
              lineStyle: {
                color: "rgba(255, 255, 255, 0.5)",
                type: "solid",
              },
              symbolSize: [0, 0],
            },
          },
        ],
      };
      const chartDom1 = document.getElementById("botm1");
      const myChart = echarts.init(chartDom1);
      option && myChart.setOption(option);
      // tools.autoHover(myChart, option, 7, 2000);
    },
    autoFillDecimal_4(num) {
      if (String(num).indexOf(".") === -1) {
        // 	整数
        return num + ".00";
      }
      // 获取小数部分
      var decimal = String(num).split(".")[1];
      if (decimal && decimal.length < 2) {
        return parseFloat(num).toFixed(2);
      } else {
        return num;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.SCMpurchasecontent {
  color: aliceblue;
  width: 100%;
  height: 100%;
  .top {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 0.0521rem;
    padding-top: 0.1953rem;
    margin-bottom: 0.1146rem;
    > div {
      text-align: center;
      font-size: 0.0469rem;
      font-weight: bold;
      color: #ffffff;
    }
  }
  .pieOne {
    height: 0.2422rem;
    width: 0.2422rem;
    margin-bottom: 0.0781rem;
  }
  .botm {
    height: 0.5807rem;
    width: 1.875rem;
    margin-left: 0.1302rem;
  }
}
</style>
